<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <title>微信公众号扫码登录</title>
    <link href="https://cdn.bootcss.com/weui/2.0.1/style/weui.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
    {%csrf_token%}
  {% verbatim %}
        <div class="weui-msg">
            <div class="weui-msg__icon-area"><i :class="`weui-icon-${result} weui-icon_msg-primary`"></i></div>
            <div class="weui-msg__text-area">
                <h2 class="weui-msg__title">{{title}}</h2>
                <p class="weui-msg__desc">{{desc}}</p>
            </div>
            <div class="weui-msg__opr-area">
                <p class="weui-btn-area" v-if="result === 'warn'">
                    <span style="cursor:pointer" class="weui-btn weui-btn_primary" @click="login">是的, 确认登录</span>
                </p>
            </div>
        </div>
    {% endverbatim %}
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script>
     var app = new Vue({
        el: '#app',
        data () {
            return {
                result: 'warn',
                title: '微信扫码登录',
                desc: '要用您的微信对应当前公众号里的账号信息登录该网站吗?',
            }
        },
        methods: {
          login () {
              axios.post('.',{},{xsrfCookieName: 'csrftoken',xsrfHeaderName : 'X-CSRFToken'}).then( ({data}) => {
                    this.result = 'success'
                    this.title = '操作成功'
                    this.desc = '请确认PC端是否已跳转至业务首页'
              }).catch(error =>{
                    this.result = 'error'
                    this.title = '操作失败'
                    this.desc = error
              })
          }
        }
     })

</script>
</body>
</html>